<script setup>
import { ref } from "vue";
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";

let showDropdown = ref(false);
let showDropup = ref(false);
function setLang(lang) {
  console.log("lang", lang);
  // localStorage.setItem("current_lang", lang);
  // translate.changeLanguage(lang); //不跳页面直接切换语言
  // //this.$nextTick(()=>{  //设置菜单下的选中状态的距离左侧的距离
  // //this.$refs.bgBarRef.style.width=this.$refs.navRefs[0].offsetWidth+"px";
  // //})
  // this.$i18n.locale = lang;
}
</script>
<template>
  <div class="">
    <div class="dropdown">
      <MaterialButton
        variant="gradient"
        color="success"
        class="dropdown-toggle"
        :class="{ show: showDropdown }"
        @focusout="showDropdown = false"
        id="dropdownMenuButton"
        data-bs-toggle="dropdown"
        :area-expanded="showDropdown"
        @click="showDropdown = !showDropdown"
      >
        Dropdown button
      </MaterialButton>

      <ul
        class="dropdown-menu px-2 py-3"
        :class="{ show: showDropdown }"
        aria-labelledby="dropdownMenuButton"
      >
        <li>
          <!-- <a class="dropdown-item border-radius-md" @click="setLang('zh')"
            >简体中文</a
          > -->
          <span class="dropdown-item border-radius-md" @click="setLang('zh')"
            >简体中文</span
          >
        </li>
        <li>
          <a
            class="dropdown-item border-radius-md"
            @click="router.push(`/products?type=1`)"
            >Another action</a
          >
        </li>
        <li>
          <a class="dropdown-item border-radius-md" href="javascript:;"
            >Something else here</a
          >
        </li>
      </ul>
    </div>
  </div>
</template>
